<div id="contenedor" class="container">  
    <form class="form-horizontal">     
        <div class="row-fluid">

            <div class="row-fluid">
                <ul class="span12 breadcrumb">
                    <li class="offset5"><b>Registrar Venta</b></li>
                </ul>
            </div>
            <div class="span5 "> 
                <div class="control-group">  
                    <label  class="control-label" for="input01">Fecha</label>  
                    <div class="controls">  
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-calendar"></i></span>
                            <input type="text" class="datePicker input-small fechaRegistrarVenta"> 
                        </div>  
                    </div>  
                </div> 
                <div class="control-group"> 
                    <label class="control-label" for="input01">Factura N°</label>  
                    <div class="controls">  
                        <input id="inputIncrementarTarifas" class="input-small" type="text" value="0001">  
                    </div>  
                </div>

                <div class="control-group">  
                    <label class="control-label" for="input01">Cliente</label>  
                    <div class="controls">  
                        <input type="text" class="input-large" id="input01">  
                    </div>  
                </div> 
            </div>
            <div class="span5"> 
                <div class="control-group">  
                    <label class="control-label" for="input01">Teléfono</label>  
                    <div class="controls">  
                        <input type="text" class="input-large" id="input01">  
                    </div>  
                </div> 

                <div class="control-group">  
                    <label class="control-label" for="input01">Doc. ID</label>  
                    <div class="controls">  
                        <input type="text" class="input-large" id="input01">  
                    </div>  
                </div> 

                <div class="control-group">  
                    <label class="control-label" for="input01">Correo</label>  
                    <div class="controls">  
                        <input type="text" class="input-large" id="input01">  
                    </div>  
                </div> 
            </div> 

        </div>
        <hr>
        <div id="areaServiciosExtra" class="row-fluid">
            <div class="row-fluid">
                <div class="span2 "><label class="pull-right">Servicios</label></div><div class="span3">          
                    <select id="selectServicios">  
                        <option value="none"></option>  
                        <option value="1">Traslado a hotel</option>  
                        <option value="2">Tour ciudad</option>  
                    </select>
                </div>
                <div class="span1">Cantidad</div>
                <div class="span2">

                    <input id="cantidadServicio" type="text" class="input-small">  
                </div>
                <div class="span1 "><button id="agregarServicio" type="button" class="btn btn-inverse">Agregar</button></div>

            </div>
            <br>
            <div  class="row-fluid ">
                <div class="span10 offset1">
                    <table class="table table-striped">
                        <thead id="headTablaServicio" class="hide">
                            <tr>
                                <th>Nombre del servicio</th>
                                <th>Tarifa</th>
                                <th>Cantidad</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody id="bodyTabla">


                        </tbody>
                    </table>
                </div>
            </div>



        </div>
        <br>
        <hr>
        <div class="row-fluid">

            <div class="span5"> 
                <div class="control-group">  
                    <label class="control-label" for="input01" >Subtotal</label>  
                    <div class="controls">   
                        <input type="text" class="input-small" value="$35,000" readonly="readonly">  <a href="#modalDescuento" role="button" class="btn btn-inverse btn-small pull-right" data-toggle="modal">     Descuento  </a>
                    </div>
                </div> 
                <div class="control-group">  
                    <div class="controls">   
                        <div class="row-fluid">
                            <div class="span12">
                                <label class="pull-right">IVA <input type="checkbox"></label>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <label class="pull-right">Impuesto 2 <input type="checkbox"></label>
                            </div>
                        </div>
                    </div>
                </div> 

                <div class="control-group">  
                    <label class="control-label" for="input01">Total de impuestos</label>  
                    <div class="controls">  
                        <input type="text" class="input-large"  value="" readonly="readonly">  
                    </div>  
                </div> 
            </div> 
            <div class="span6">  

                
                <div class="control-group">  
                    <label class="control-label" for="input01" >Total a pagar</label>  
                    <div class="controls">  
                        <input id="registrarV-Pendiente" type="text" class="input-large" readonly="readonly"  data-pendiente="40600" value="$40,600">  
                    </div>  
                </div> 
                
                
                <div class="control-group">  

                    <div class="controls">  
                        <a href="#modalRegistrarPago" role="button" class="btn btn-inverse btn-small" data-toggle="modal">     Registrar Pago  </a>
                    </div>  
                </div> 


                <div class="control-group">  
                    <label class="control-label" for="input01">Pagado</label>  
                    <div class="controls">  
                        <input id="registrarV-Pagado" type="text" class="input-large" readonly="readonly" >  
                    </div>  
                </div> 

                <div class="control-group">  
                    <label class="control-label" for="input01" >Pendiente</label>  
                    <div class="controls">  
                        <input id="registrarV-Pendiente" type="text" class="input-large" readonly="readonly"  data-pendiente="40600" value="$40,600">  
                    </div>  
                </div> 
            </div> 

        </div>
        <div class="row-fluid">
            <div class="form-actions">          
                <div class="span6 offset4 ">
                    <button type="button" class="btn btn-inverse "><i class="icon-ok-sign icon-white"></i> Guardar</button>
                </div> 
            </div>
        </div>
    </form>
</div>  

<!-- Modal Descuento-->
<div id="modalDescuento" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 id="myModalLabel">Descuento

    </div>
    <div class="modal-body">

        <div class="row-fluid">
            <div class="span4"><label class="pull-right">Valor</label></div>
            <div class="span8"><input type="text"></div>
        </div>
        <div class="row-fluid">
            <div class="span4"><label class="pull-right">Descripción</label></div>
            <div class="span8"><input type="text"></div>
        </div>

    </div>
    <div class="modal-footer">
        <button class="btn btn-inverse">Guardar</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    </div>
</div>







<!-- Modal Registrar Pago-->
<div id="modalRegistrarPago" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 id="myModalLabel">Registrar Pago

    </div>
    <div class="modal-body">

        <div class="row-fluid">
            <div class="span4"><label class="pull-right">Fecha</label></div>
            <div class="span8"><div class="input-prepend">
                    <span class="add-on"><i class="icon-calendar"></i></span>
                    <input type="text" class="datePicker input-small fechaRegistrarVenta"> 
                </div></div>
        </div>
        <div class="row-fluid">
            <div class="span4"><label class="pull-right">Valor</label></div>
            <div class="span8"><input type="text"></div>
        </div>
        <div class="row-fluid">
            <div class="span4"><label class="pull-right">Descripción</label></div>
            <div class="span8"><input type="text"></div>
        </div>

    </div>
    <div class="modal-footer">
        <button class="btn btn-inverse">Guardar</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    </div>
</div>





